<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <title>{% block title %}RanTS{% endblock %}</title>

    <link rel="stylesheet" href="{{ STATIC_URL }}css/chat.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}countdown/jquery.countdown.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/game.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">

    {% block extra_css %}{% endblock %}


    {% block extra_js %}{% endblock %}

</head>

<!--
<body style="background: url({{STATIC_URL}}img/imagen_prueba_3.jpg) no-repeat center center fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;">
-->
<body style="">
    <header>
		<div class="main-menu">
			<div class="container">
				<div class="row">
					<div class="col-md-4">						
						<h1><a class="navbar-brand" href="{% url 'games' %}" data-0="line-height:90px;" >RanTS</a></h1>
					</div>
					<div class="col-md-8">
						<div class="dropdown">
							<ul class="nav nav-pills">
							    <li class="active"><a href="index.html">Inicio</a></li>
							    <li><a href="#">Ayuda</a></li>
								<li><a href="#">Contacto</a></li>
								<li><a href="#">Donativo</a></li>
							</ul>
						</div>
					</div>	
				</div>				
			</div>
		</div>
	</header>


    <div id="main">{% block main %}{% endblock %}</div>
    {% block form %}{% endblock %}

    <script src="{{ STATIC_URL }}js/jquery/jquery-latest.min.js"></script>
    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
    <script src="{{ STATIC_URL }}countdown/jquery.countdown.js"></script>
    <script src="{{ STATIC_URL }}js/Chart.js"></script>
    <script src="{{ STATIC_URL }}js/utils.js"></script>
    <script src="{{ STATIC_URL }}melonjs/melon.js"></script>
    <script src="{{ STATIC_URL }}js/notify.min.js"></script>

    <script>
        /* game namespace */
        var game_map = {
         
            /** 
             * an object where to store game global data
             */
            data : {
                // score
                score : 0
            },
             
            // Run on page load.
            "onload" : function () {

                // Initialize the video.
                // 'auto' como último argumento si queremos que se autoajuste
                if (!me.video.init("melonjsMap", 256, 256, true)) {
                    alert("Your browser does not support HTML5 canvas.");
                    return;
                }
                 
                // add "#debug" to the URL to enable the debug Panel
                if (document.location.hash === "#debug") {
                    window.onReady(function () {
                        me.plugin.register.defer(debugPanel, "debug");
                    });
                }
         
                // Initialize the audio.
                me.audio.init("mp3,ogg");
         
                // Set a callback to run when loading is complete.
                me.loader.onload = this.loaded.bind(this);
              
                // Load the resources.
                me.loader.preload(game_map.resources);
         
                // Initialize melonJS and display a loading screen.
                me.state.change(me.state.LOADING);
            },

            // Run on game resources loaded.
            "loaded" : function () {
                me.state.set(me.state.MENU, new game_map.TitleScreen());
                me.state.set(me.state.PLAY, new game_map.PlayScreen2());
                me.state.set(me.state.PLAY, new game_map.PlayScreen());

         
                // Start the game.
                me.state.change(me.state.PLAY);
            }
        };



        //game resources
        game_map.resources = [
            /**
             * Graphics.
             */
            // our level tileset
            {name: "area01_level_tiles",  type:"image", src: "{{ STATIC_URL }}map/area01_level_tiles.png"},
             
            /* 
             * Maps. 
             */
            {name: "area04", type: "tmx", src: "{{ STATIC_URL }}map/area04.tmx"},
            
            //{name: "areaAux", type: "tmx", src: "{{ STATIC_URL }}map/areaAux.tmx"}         
        ];

        game_map.PlayScreen = me.ScreenObject.extend({

            /** 
             *  action to perform on state change
             */
            onResetEvent: function() {
                // load a level
                me.levelDirector.loadLevel("area04");
                //me.loader.addTMXLevel("areaAux");
                //me.loader.getTMX("areaAux");
                //me.loader.load("areaAux", this.onload.bind(this), this.onerror.bind(this));
                //me.loader.preload(game_map.resources);


                // reset the score
                game_map.data.score = 0;

                // add our HUD to the game world    
                me.game.add(new game_map.HUD.Container());

            },
             
             
            /** 
             *  action to perform when leaving this screen (state change)
             */
            onDestroyEvent: function() {
                // remove the HUD from the game world
                me.game.world.removeChild(me.game.world.getEntityByProp("name", "HUD")[0]);
            }
        });

        game_map.PlayScreen2 = me.ScreenObject.extend({

            /** 
             *  action to perform on state change
             */
            onResetEvent: function() {
                // load a level
                //me.levelDirector.loadLevel("area03");
                me.levelDirector.loadLevel("areaAux");

                // reset the score
                game_map.data.score = 0;
                 
                // add our HUD to the game world    
                me.game.add(new game_map.HUD.Container());
                 
            },
             
             
            /** 
             *  action to perform when leaving this screen (state change)
             */
            onDestroyEvent: function() {
                // remove the HUD from the game world
                me.game.world.removeChild(me.game.world.getEntityByProp("name", "HUD")[0]);
            }
        });


        /**
         * a HUD container and child items
         */

        game_map.HUD = game_map.HUD || {};

         
        game_map.HUD.Container = me.ObjectContainer.extend({

            init: function() {
                // call the constructor
                this.parent();

                // persistent across level change
                this.isPersistent = true;

                // non collidable
                this.collidable = false;

                // make sure our object is always draw first
                this.z = Infinity;

                // give a name
                this.name = "HUD";

                // add our child score object at the top left corner
                this.addChild(new game_map.HUD.ScoreItem(5, 5));
            }
        });


        /** 
         * a basic HUD item to display score
         */
        game_map.HUD.ScoreItem = me.Renderable.extend({	
            /** 
             * constructor
             */
            init: function(x, y) {

                // call the parent constructor 
                // (size does not matter here)
                this.parent(new me.Vector2d(x, y), 10, 10); 

                // local copy of the global score
                this.score = -1;

                // make sure we use screen coordinates
                this.floating = true;
            },

            /**
             * update function
             */
            update : function () {
                // we don't do anything fancy here, so just
                // return true if the score has been updated
                if (this.score !== game_map.data.score) {	
	                this.score = game_map.data.score;
	                return true;
                }
                return false;
            },

            /**
             * draw the score
             */
            draw : function (context) {
                // draw it baby !
            }

        });

        game_map.TitleScreen = me.ScreenObject.extend({
            /**	
             *  action to perform on state change
             */
            onResetEvent: function() {	
              ; // TODO
            },


            /**	
             *  action to perform when leaving this screen (state change)
             */
            onDestroyEvent: function() {
              ; // TODO
            }
        });

        window.onReady(function onReady() {

            var probando = game_map.onload();
            me.input.registerPointerEvent("click", me.game.viewport, (function(e){
                
                // 'click' event on map

                $.each( $('.action-tiles'), function( key, value ) {
                    $(this).hide();
                });


                // console.log(e.pointerId, e.gameX, e.gameY);

                var x_coordinate = Math.floor(e.gameX/32);
                var y_coordinate = Math.floor(e.gameY/32);
                var base_map = game_vc.get_base_map(x_coordinate, y_coordinate);
                if (base_map){
                    $('#'+base_map.base_id_map).show();
                    $('#'+base_map.base_id_map_action).show();
                    game_vc.base_map_selected = base_map.base_id;
                }
            }));
            $.each($('.action-tiles'), function( key, value ) {
                $(this).hide();
            });
        });

    </script>

    <script>
        var showForm = function() {
            $('form').slideDown(function() {
                $('form input[type="text"]').focus();
            });
        };

    </script>

</body>
